<template>
	<div>
		<div class="cms-title" @add="addTab = !addTab">
			<p>订单管理</p>
		</div>
		<div v-show="!configTab">
			<div>
				<actionBar></actionBar>
			</div>
			<div>
				<vTable></vTable>
			</div>

		</div>
		<div v-show="configTab">
			<detail></detail>

		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	let Event = new Vue();
	let actionBar = {
		template: `
		<div class="action-bar">
		<div class="action-bar-box">
			<span>&#12288;订单号：</span>
			<el-input  placeholder="订单号" clearable prefix-icon="el-icon-search"></el-input>
		</div>
		<div class="action-bar-box">
			<span>下单用户：</span>
			<el-input  placeholder="下单用户电话" clearable prefix-icon="el-icon-search"></el-input>
		</div>
		<div class="mt20">
		<div class="action-bar-box">
			<span>订单状态：</span>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			</div>
			<div class="action-bar-box">
			<span>支付方式：</span>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			</div>
		</div>
		<div class="action-bar-box">
			<span>开始日期：</span>
			 <el-date-picker  v-model="value1"       type="date"     placeholder="选择日期">
    </el-date-picker>
		</div>
		<div class="action-bar-box">
			<span>截止日期：</span>
			 <el-date-picker    v-model="value2"       type="date"     placeholder="选择日期">
    </el-date-picker>
		</div>
		<div>
			<el-button type="primary">搜索</el-button>
		</div>
		<hr>
		</div>
	`,
		data() {
			return {
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value1: '',
				value2: ''
			}
		},
		props: ['value']

	};
	let vTable = {
		template: `
		<div class="v-table">
		<el-table border stripe ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="id" label="订单号" width="200">
			</el-table-column>
			<el-table-column prop="linkPhone" label="下单用户" width="130" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="name" label="购买产品" width="190" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="buyNum" label="购买数量" width="90" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="totalMoney" label="订单金额" width="90" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="status" label="订单状态" width="90" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="payType" label="支付方式" width="90" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="操作" >
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination background layout="prev, pager, next" :total="1000">
		</el-pagination>
	</div>
		
	`,
		data() {
			return {
				tableData3: [{
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-06 09:16",
					"fullAddress": "数据库提前去特烦恼",
					"id": "970830532972449792",
					"linkMan": "小小",
					"linkPhone": "18687046092",
					"name": "洋洋乐补元贴（女士）",
					"payType": "支付宝",
					"phone": "18687046092",
					"processTime": "",
					"status": "待确认",
					"totalMoney": "0.01"
				}, {
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-06 09:17",
					"fullAddress": "数据库提前去特烦恼",
					"id": "970830618393645056",
					"linkMan": "小小",
					"linkPhone": "18687046092",
					"name": "洋洋乐补元贴（女士）",
					"payType": "支付宝",
					"phone": "18687046092",
					"processTime": "",
					"status": "已完成",
					"totalMoney": "0.01"
				}, {
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-06 09:16",
					"fullAddress": "数据库提前去特烦恼",
					"id": "970830532972449792",
					"linkMan": "小小",
					"linkPhone": "18687046092",
					"name": "洋洋乐补元贴（女士）",
					"payType": "支付宝",
					"phone": "18687046092",
					"processTime": "",
					"status": "待确认",
					"totalMoney": "0.01"
				}, {
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-06 09:16",
					"fullAddress": "数据库提前去特烦恼",
					"id": "970830532972449792",
					"linkMan": "小小",
					"linkPhone": "18687046092",
					"name": "洋洋乐补元贴（女士）",
					"payType": "支付宝",
					"phone": "18687046092",
					"processTime": "",
					"status": "待确认",
					"totalMoney": "0.01"
				}, {
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-06 09:51",
					"fullAddress": "鸡脚箐",
					"id": "970839139243855872",
					"linkMan": "看看",
					"linkPhone": "18687046092",
					"name": "洋洋乐补元贴（男士）",
					"payType": "支付宝",
					"phone": "18687046092",
					"processTime": "",
					"status": "待确认",
					"totalMoney": "0.01"
				}, {
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-06 21:08",
					"fullAddress": "昆明西山区",
					"id": "971009672611901440",
					"linkMan": "老马",
					"linkPhone": "13888113754",
					"name": "洋洋乐补元贴（女士）",
					"payType": "微信",
					"phone": "",
					"processTime": "",
					"status": "待支付",
					"totalMoney": "0.01"
				}, {
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-08 10:36",
					"fullAddress": "四季歌",
					"id": "971575271908794368",
					"linkMan": "来了",
					"linkPhone": "18687046092",
					"name": "洋洋乐补元贴（男士）",
					"payType": "微信",
					"phone": "",
					"processTime": "",
					"status": "待支付",
					"totalMoney": "0.01"
				}, {
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-08 10:36",
					"fullAddress": "四季歌",
					"id": "971575271908794368",
					"linkMan": "来了",
					"linkPhone": "18687046092",
					"name": "洋洋乐补元贴（男士）",
					"payType": "微信",
					"phone": "",
					"processTime": "",
					"status": "待支付",
					"totalMoney": "0.01"
				}, {
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-08 10:36",
					"fullAddress": "四季歌",
					"id": "971575271908794368",
					"linkMan": "来了",
					"linkPhone": "18687046092",
					"name": "洋洋乐补元贴（男士）",
					"payType": "微信",
					"phone": "",
					"processTime": "",
					"status": "待支付",
					"totalMoney": "0.01"
				}, {
					"area": "",
					"buyNum": 1,
					"createTime": "2018-03-08 10:36",
					"fullAddress": "四季歌",
					"id": "971575271908794368",
					"linkMan": "来了",
					"linkPhone": "18687046092",
					"name": "洋洋乐补元贴（男士）",
					"payType": "微信",
					"phone": "",
					"processTime": "",
					"status": "待支付",
					"totalMoney": "0.01"
				}],
			}
		},
		methods: {
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				console.log(index, row);
				Event.$emit('lookVip', row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			}

		}
	};

	let detail = {
		template: `
		<div>
		<div class="add-box">
			<span class="add-title">账号状态</span>
			<el-input v-model="tableData3.status"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">手机号</span>
			<el-input v-model="tableData3.phone"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">注册时间</span>
			<el-input v-model="tableData3.createTime"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">邀请人</span>
			<el-input v-model="tableData3.referrerPhone"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">昵称</span>
			<el-input v-model="tableData3.nickName"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">最后登录时间</span>
			<el-input v-model="tableData3.lastTime"  :disabled="true"></el-input>
		</div>
		<div>
			 <el-button type="info" @click="back">返回</el-button>
		</div>
	</div>
		
	`,
		data() {
			return {
				tableData3: {}
			}
		},
		methods: {
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			back: function() {
				Event.$emit('config');
			}
		},
		mounted: function() {
			let that = this
			Event.$on('lookVip',
				function(data) {
					that.tableData3 = data;
				});
		}
	};

	export default {
		name: "Menu",
		components: {
			actionBar,
			vTable,
			detail
		},
		data() {
			return {
				configTab: false
			}
		},
		mounted: function() {
			let that = this;
			Event.$on('lookVip',
				function() {
					that.configTab = !that.configTab;
				});
			Event.$on('config',
				function() {
					that.configTab = !that.configTab;
				});
		}
	}
</script>

<style>
	.cms-title {
		padding: 8px 16px;
		background-color: #ecf8ff;
		border-radius: 4px;
		border-left: 5px solid #50bfff;
		margin-bottom: 20px;
	}
	
	.cms-title p {
		text-align: left;
		font-size: 24px;
	}
	
	.action-bar {
		text-align: left;
	}
	
	.action-bar-box {
		display: inline-block;
		margin-bottom: 20px;
	}
	
	.action-bar .el-input {
		width: 240px;
		margin-right: 16px;
	}
	
	.v-table,
	.v-table .el-pagination {
		margin-top: 20px;
	}
	
	.v-table .cell {
		text-align: center;
	}
	
	.add-box {
		margin-bottom: 20px;
	}
	
	.add-box .el-input {
		width: 200px;
	}
	
	.add-title {
		color: #999;
		font-size: 14px;
		margin-right: 10px;
		width: 100px;
		display: inline-block;
		text-align: right;
	}
	
	.mt20 {
		margin-bottom: 20px;
	}
	
	.vTable-img {
		width: 120px;
		height: 80px;
	}
</style>